<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>六足机器人上位机</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36D399',
                        accent: '#FF6B35',
                        dark: '#1E293B',
                        light: '#F8FAFC',
                        frame: '#E2E8F0',
                        control: '#FF5722',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    </style>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .grid-layout {
                grid-template-rows: 65% 35%;
                height: 100%;
            }
            .grid-layout-right {
                grid-template-rows: 50% 50%;
                height: 100%;
            }
            .frame-border {
                border: 5px solid theme('colors.frame');
            }
            .app-height {
                height: calc(100vh);
            }
            .key-button {
                @apply w-12 h-12 flex items-center justify-center rounded-lg bg-gray-100 text-gray-700 font-medium transition-all duration-200 shadow-sm;
            }
            .key-button-active {
                @apply bg-control text-white transform scale-105 shadow-md;
            }
            .robot-arena {
                @apply relative w-full h-full bg-gray-100 rounded-lg overflow-hidden;
            }
            .robot {
                @apply absolute w-12 h-12 bg-control rounded-full flex items-center justify-center text-white transition-all duration-150 shadow-md;
            }
            .keyboard-container {
                @apply grid grid-cols-3 gap-2 justify-center max-w-[12rem] mx-auto;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50">
    <!-- 主要内容区 -->
    <div class="relative app-height frame-border overflow-hidden w-full max-w-7xl mx-auto">
        <!-- 左右分隔线 -->
        <div class="absolute left-1/2 top-0 bottom-0 w-[5px] bg-frame -ml-[2.5px] z-10"></div>

        <!-- 左侧区域 -->
        <div class="absolute left-0 top-0 bottom-0 w-1/2 grid grid-layout">
            <!-- 左侧上下分隔线 -->
            <div class="absolute left-0 right-0 top-[65%] h-[5px] bg-frame -mt-[2.5px] z-10"></div>

            <!-- 左上区域 -->
            <div class="bg-white p-4 overflow-hidden relative">
                <div class="absolute inset-0 bg-primary/5 z-0"></div>
                <div class="relative z-10">
                    <h2 class="text-xl font-bold text-dark mb-3 flex items-center">
                        <i class="fa fa-area-chart text-primary mr-2"></i>
                        摄像头
                    </h2>
                    <p class="text-gray-600 mb-3 text-sm">这个区域占据左侧65%的空间，适合展示主要数据和分析图表。</p>
                    <div class="bg-gray-100 rounded-lg p-3 h-[65%] flex items-center justify-center">
                        <div class="w-full h-full flex flex-col items-center justify-center">
                            <div class="animate-pulse rounded-full h-16 w-16 bg-gray-300 mb-3"></div>
                            <div class="animate-pulse rounded h-3 w-3/4 bg-gray-300 mb-2"></div>
                            <div class="animate-pulse rounded h-3 w-1/2 bg-gray-300"></div>
                        </div>
                    </div>
                    <button class="mt-3 px-3 py-1.5 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors focus:outline-none focus:ring-2 focus:ring-primary/50 text-sm">
                        查看详细报告
                    </button>
                </div>
                <div class="absolute -bottom-3 -right-3 w-16 h-16 bg-primary/10 rounded-full"></div>
            </div>

            <!-- 左下区域 - 机器人控制 -->
            <div class="bg-white p-4 overflow-hidden relative">
                <div class="absolute inset-0 bg-control/5 z-0"></div>
                <div class="relative z-10">
                    <h2 class="text-lg font-bold text-dark mb-2 flex items-center">
                        <i class="fa fa-gamepad text-control mr-2"></i>
                        机器人控制
                    </h2>
                    <p class="text-gray-600 mb-3 text-sm">使用WASD控制机器人移动，点击下方按钮也可以控制。</p>

                    <!-- 新增步态切换按钮区域 -->
                    <div class="absolute top-4 right-4 flex gap-2 z-20">
                        <button id="gait-wave" class="px-2 py-1 rounded-md text-xs transition-all duration-200 bg-gray-200 text-gray-700 hover:bg-gray-300">
                            Wave
                        </button>
                        <button id="gait-triangle" class="px-2 py-1 rounded-md text-xs transition-all duration-200 bg-control text-white">
                            Triangle
                        </button>
                    </div>

                    <!-- 优化后的键盘布局 -->
                    <div class="keyboard-container mb-3">
                        <div class="col-span-3 flex justify-center">
                            <button id="btn-up" class="key-button text-sm">W</button>
                        </div>
                        <div class="col-span-3 grid grid-cols-3 gap-2">
                            <div class="col-start-1 flex justify-end">
                                <button id="btn-left" class="key-button text-sm">A</button>
                            </div>
                            <div class="flex justify-center">
                                <button id="btn-down" class="key-button text-sm">S</button>
                            </div>
                            <div class="flex justify-start">
                                <button id="btn-right" class="key-button text-sm">D</button>
                            </div>
                        </div>
                    </div>

                    <div class="robot-arena">
                        <div id="robot" class="robot">
                            <i class="fa fa-arrow-up"></i>
                        </div>
                    </div>

                    <div class="mt-2 text-xs text-gray-500 flex flex-wrap gap-x-4">
                        <div class="w-full sm:w-auto"><span>当前指令:</span> <span id="current-command">等待输入...</span></div>
                        <div class="w-full sm:w-auto"><span>位置:</span> <span id="robot-position">X: 50%, Y: 50%</span></div>
                        <div class="w-full sm:w-auto"><span>方向:</span> <span id="robot-direction">北</span></div>
                        <div class="w-full sm:w-auto"><span>步态模式:</span> <span id="gait-mode">Triangle</span></div>
                    </div>
                </div>
                <div class="absolute -bottom-3 -right-3 w-12 h-12 bg-control/10 rounded-full"></div>
            </div>
        </div>

        <!-- 右侧区域 -->
        <div class="absolute right-0 top-0 bottom-0 w-1/2 grid grid-layout-right">
            <!-- 右侧上下分隔线 -->
            <div class="absolute left-0 right-0 top-1/2 h-[5px] bg-frame -mt-[2.5px] z-10"></div>

            <!-- 右上区域 -->
            <div class="bg-white p-4 overflow-hidden relative">
                <div class="absolute inset-0 bg-accent/5 z-0"></div>
                <div class="relative z-10">
                    <h2 class="text-lg font-bold text-dark mb-2 flex items-center">
                        <i class="fa fa-users text-accent mr-2"></i>
                        团队成员
                    </h2>
                    <p class="text-gray-600 mb-2 text-sm">这个区域占据右侧50%的空间，适合展示团队成员信息。</p>
                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-2 max-h-[70%] overflow-y-auto pr-1">
                        <div class="flex flex-col items-center p-2 bg-gray-50 rounded-lg">
                            <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center mb-1">
                                <i class="fa fa-user text-gray-500 text-sm"></i>
                            </div>
                            <span class="text-xs font-medium text-gray-700">张三</span>
                            <span class="text-[10px] text-gray-500">产品经理</span>
                        </div>
                        <div class="flex flex-col items-center p-2 bg-gray-50 rounded-lg">
                            <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center mb-1">
                                <i class="fa fa-user text-gray-500 text-sm"></i>
                            </div>
                            <span class="text-xs font-medium text-gray-700">李四</span>
                            <span class="text-[10px] text-gray-500">设计师</span>
                        </div>
                        <div class="flex flex-col items-center p-2 bg-gray-50 rounded-lg">
                            <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center mb-1">
                                <i class="fa fa-user text-gray-500 text-sm"></i>
                            </div>
                            <span class="text-xs font-medium text-gray-700">王五</span>
                            <span class="text-[10px] text-gray-500">开发工程师</span>
                        </div>
                    </div>
                </div>
                <div class="absolute -top-3 -right-3 w-12 h-12 bg-accent/10 rounded-full"></div>
            </div>

            <!-- 右下区域 -->
            <div class="bg-white p-4 overflow-hidden relative">
                <div class="absolute inset-0 bg-dark/5 z-0"></div>
                <div class="relative z-10">
                    <h2 class="text-lg font-bold text-dark mb-2 flex items-center">
                        <i class="fa fa-calendar text-dark mr-2"></i>
                        日程安排
                    </h2>
                    <p class="text-gray-600 mb-2 text-sm">这个区域占据右侧50%的空间，适合展示近期日程和活动。</p>
                    <div class="space-y-2 max-h-[70%] overflow-y-auto pr-1">
                        <div class="p-2 bg-gray-50 rounded-lg border-l-3 border-primary">
                            <div class="flex justify-between items-start">
                                <h3 class="font-medium text-gray-800 text-sm">产品评审会议</h3>
                                <span class="text-[10px] bg-primary/10 text-primary px-1.5 py-0.5 rounded-full">今天</span>
                            </div>
                            <p class="text-xs text-gray-600 mt-0.5">14:00 - 15:30 | 会议室A</p>
                        </div>
                        <div class="p-2 bg-gray-50 rounded-lg border-l-3 border-secondary">
                            <div class="flex justify-between items-start">
                                <h3 class="font-medium text-gray-800 text-sm">设计讨论</h3>
                                <span class="text-[10px] bg-secondary/10 text-secondary px-1.5 py-0.5 rounded-full">明天</span>
                            </div>
                            <p class="text-xs text-gray-600 mt-0.5">10:00 - 11:00 | 线上会议</p>
                        </div>
                        <div class="p-2 bg-gray-50 rounded-lg border-l-3 border-accent">
                            <div class="flex justify-between items-start">
                                <h3 class="font-medium text-gray-800 text-sm">客户演示</h3>
                                <span class="text-[10px] bg-accent/10 text-accent px-1.5 py-0.5 rounded-full">周五</span>
                            </div>
                            <p class="text-xs text-gray-600 mt-0.5">15:00 - 16:00 | 会议室B</p>
                        </div>
                    </div>
                </div>
                <div class="absolute -bottom-3 -left-3 w-12 h-12 bg-dark/10 rounded-full"></div>
            </div>
        </div>
    </div>

    <script>
        // 机器人控制相关代码
        document.addEventListener('DOMContentLoaded', () => {
            // 机器人状态
            const robot = {
                x: 50,  // 百分比位置
                y: 50,
                direction: 0, // 0:上 1:右 2:下 3:左
                speed: 5,     // 移动速度
                element: document.getElementById('robot'),
                commandDisplay: document.getElementById('current-command'),
                positionDisplay: document.getElementById('robot-position'),
                directionDisplay: document.getElementById('robot-direction')
            };

            // 方向文本映射
            const directionText = ['北', '东', '南', '西'];

            // 更新机器人显示
            function updateRobotDisplay() {
                robot.element.style.left = `${robot.x}%`;
                robot.element.style.top = `${robot.y}%`;
                robot.element.style.transform = `rotate(${robot.direction * 90}deg)`;
                robot.positionDisplay.textContent = `X: ${robot.x.toFixed(1)}%, Y: ${robot.y.toFixed(1)}%`;
                robot.directionDisplay.textContent = directionText[robot.direction];
            }

            // 移动机器人
            function moveRobot(direction) {
                const arena = document.querySelector('.robot-arena');
                const arenaRect = arena.getBoundingClientRect();
                const robotSize = robot.element.offsetWidth;
                const maxX = 100 - (robotSize / arenaRect.width * 100);
                const maxY = 100 - (robotSize / arenaRect.height * 100);

                switch(direction) {
                    case 'up':
                        robot.y = Math.max(0, robot.y - robot.speed);
                        break;
                    case 'down':
                        robot.y = Math.min(maxY, robot.y + robot.speed);
                        break;
                    case 'left':
                        robot.x = Math.max(0, robot.x - robot.speed);
                        break;
                    case 'right':
                        robot.x = Math.min(maxX, robot.x + robot.speed);
                        break;
                }

                updateRobotDisplay();
            }

            // 旋转机器人
            function rotateRobot(turnDirection) {
                if (turnDirection === 'left') {
                    robot.direction = (robot.direction + 3) % 4; // 逆时针
                } else {
                    robot.direction = (robot.direction + 1) % 4; // 顺时针
                }

                updateRobotDisplay();
            }

            // 处理命令
            function handleCommand(command) {
                robot.commandDisplay.textContent = command;

                // 重置所有按钮样式
                document.querySelectorAll('.key-button').forEach(btn => {
                    btn.classList.remove('key-button-active');
                });

                // 激活当前按钮
                const btn = document.getElementById(`btn-${command}`);
                if (btn) btn.classList.add('key-button-active');

                // 执行命令
                switch(command) {
                    case 'up':
                        moveRobot('up');
                        break;
                    case 'down':
                        moveRobot('down');
                        break;
                    case 'left':
                        rotateRobot('left');
                        break;
                    case 'right':
                        rotateRobot('right');
                        break;
                }

                // 200ms后恢复按钮样式
                setTimeout(() => {
                    if (btn) btn.classList.remove('key-button-active');
                }, 200);
            }

            // 步态切换逻辑
            const gaitWaveBtn = document.getElementById('gait-wave');
            const gaitTriangleBtn = document.getElementById('gait-triangle');
            const gaitModeDisplay = document.getElementById('gait-mode');
            let currentGait = 'triangle'; // 初始步态

            // 切换步态函数
            function switchGait(gait) {
                if (gait === 'wave') {
                    currentGait = 'wave';
                    gaitWaveBtn.classList.remove('bg-gray-200', 'text-gray-700');
                    gaitWaveBtn.classList.add('bg-control', 'text-white');
                    gaitTriangleBtn.classList.remove('bg-control', 'text-white');
                    gaitTriangleBtn.classList.add('bg-gray-200', 'text-gray-700');
                    gaitModeDisplay.textContent = 'Wave';
                } else {
                    currentGait = 'triangle';
                    gaitTriangleBtn.classList.remove('bg-gray-200', 'text-gray-700');
                    gaitTriangleBtn.classList.add('bg-control', 'text-white');
                    gaitWaveBtn.classList.remove('bg-control', 'text-white');
                    gaitWaveBtn.classList.add('bg-gray-200', 'text-gray-700');
                    gaitModeDisplay.textContent = 'Triangle';
                }
                // 这里可以添加发送步态切换指令到ESP32的逻辑
                robot.commandDisplay.textContent = `切换到${currentGait}步态`;
            }

            // 绑定步态切换按钮事件
            gaitWaveBtn.addEventListener('click', () => switchGait('wave'));
            gaitTriangleBtn.addEventListener('click', () => switchGait('triangle'));

            // 键盘事件监听
            document.addEventListener('keydown', (e) => {
                // 防止按键滚动页面
                if(['w', 'a', 's', 'd', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key.toLowerCase())) {
                    e.preventDefault();
                }

                switch(e.key.toLowerCase()) {
                    case 'w':
                    case 'arrowup':
                        handleCommand('up');
                        break;
                    case 's':
                    case 'arrowdown':
                        handleCommand('down');
                        break;
                    case 'a':
                    case 'arrowleft':
                        handleCommand('left');
                        break;
                    case 'd':
                    case 'arrowright':
                        handleCommand('right');
                        break;
                }
            });

            // 按钮点击事件
            document.getElementById('btn-up').addEventListener('click', () => handleCommand('up'));
            document.getElementById('btn-down').addEventListener('click', () => handleCommand('down'));
            document.getElementById('btn-left').addEventListener('click', () => handleCommand('left'));
            document.getElementById('btn-right').addEventListener('click', () => handleCommand('right'));

            // 初始化显示
            updateRobotDisplay();
        });
    </script>
</body>
</html>
